<template>
	<view>
		<view class="header-input">
			<input v-model="content" placeholder="输入名字、专业查找" placeholderStyle="color:#BBBBBB" type="text"></input>
			<view>
				<image @click="toss()" class="image" src="../../static/images/search.png"></image>
			</view>
		</view>

		<view>
			<image class="im" :src="srcXxh()"></image>
		</view>

		<view class="container">
			<scroll-view class="scroll-container" scroll-x scroll-with-animation v-if="brands.length > 1" :scroll-into-view="'s' + currentIndex">
				<view :class="['scroll-item', { active: index == currentId }]" :id="'s' + index" v-for="(item, index) in brands"
				 :key="index" @tap="handleScroll(index)" @click="associationList(2-index)">
					{{ item }}
					<view class="bottom-border" v-if="index == currentId">
						<!-- 底部蓝色短border -->
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="shcool">
			<scroll-view scroll-y="true" style="height: 300px;" @scrolltolower="scrolltolower">
				<view class="xqin" v-for="(item,j) in association" :key="j" @click="toxyh(item.id)">
					<view class="tr" @click="toxyh(item.id)">
						<image class="ima" :src="getHeadImg(item.avatarUrl)" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
						<view class="mz" v-text="item.associationName">贵州校友会</view>
					</view>
					<view class="zy">成员 {{item.userSum}} 人</view>
					<view class="jr" @click="toxyh(item.id)">...</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				currentId: 0,
				/* 控制被选中 */
				currentIndex: '',
				/* 控制位置 */
				content: '',
				/*搜索框内容*/
				brands: [
					'院系校友会',
					'地方校友会',
					'行业校友会'
				],
				association: [], //相应类别校友会集合
				associationId: '', //校友会id
				flag: 'true', //判断是否到底啦
				page: -1,
				size: 5,
				type: 2
			};
		},
		/* 点击tab栏发生的函数*/
		onTabItemTap() {
			this.association = [];
			this.currentId = 0;
			this.page = -1;
			this.flag = 'true';
			this.associationList(2); /* 查询数据*/
		},
		onLoad() {

		},
		methods: {
			/* </scroll-view>的触底函数*/
			scrolltolower: function() {
				console.log("我也是有底线的...");
				if (this.flag == 'true') {
					this.associationList(this.type);
				} else {
					this.page = -1;
				}
			},
			/* 去搜索页 */
			toss() {
				if (this.content != '') {
					uni.navigateTo({
						url: './ss?content=' + this.content,
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '搜索内容不能为空！',
						duration: 2000
					});
				}
			},
			//跳转到xyh页面,并传校友会id
			toxyh(id) {
				this.associationId = id,
					uni.navigateTo({
						url: 'xyhxq?id=' + this.associationId
					})
			},
			/* 菜单栏数据变化 */
			handleScroll(index) {
				this.currentId = index;
				this.currentIndex = Math.max(0, index - 1);
			},
			//获取校友会的头像
			getHeadImg(head_img) {
				if (head_img == null || head_img == '') {
					return app.globalData.Link + 'upload/图片/xiaohui.png';
				} else {
					return app.globalData.Link + 'upload/图片/' + head_img;
				}

			},
			//校友会图片
			srcXxh: function() {
				return app.globalData.Link + 'file/system/校友会.jpg';
			},

			//查询各类别下的校友会
			associationList(i) {
				var that = this;
				that.page = that.page + 1;
				if (that.type != i) { /* 菜单栏变化时初始化数据*/
					that.page = 0;
					that.association = [];
					that.flag = 'true';
				}
				that.type = i;
				console.log("page, type", that.page, that.type);
				uni.request({
					url: app.globalData.URL + 'association/queryAssociation',
					data: {
						type: that.type,
						page: that.page,
						size: that.size,
					},
					method: 'GET',
					success: res => {
						console.log("associationList", res.data);
						if (res.data.length == 0) {
							that.flag = 'false';
							that.page = that.page - 1;
							return false;
						}
						that.association = that.association.concat(Array.from(res.data)); //拼接数组
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-container {
		box-sizing: border-box;
		padding-left: 20upx;
		white-space: nowrap;
		height: 80upx;
		background: #FFFFFF;
		border-bottom: 1upx solid #ccc;

		.scroll-item {
			text-align: center;
			display: inline-block;
			padding: 0 50upx;
			line-height: 70upx;
			font-size: 26upx;
			font-weight: 350;
			color: #808080;

			&.active {
				display: inline-block;
				font-weight: bold;
				color: #555555;
				font-size: 31upx;
				// border-bottom: 2px solid #FF4F52;
			}
		}
	}

	.bottom-border {
		margin: 0 auto;
		width: 70upx;
		height: 8upx;
		background: rgba(5, 155, 255, 255);
		border-radius: 5upx;
	}

	.header-input {
		margin-left: 28rpx;
		margin-top: 20rpx;
		width: 694rpx;
		height: 66rpx;
		border-radius: 36rpx;
		background-color: rgba(245, 245, 245, 0.9);
		border: 1rpx solid #dfdfdf;
		display: flex;
		flex-direction: row;
	}

	.header-input input {
		margin-left: 31rpx;
		width: 564rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-right: 1rpx solid #dfdfdf;
		font-size: 28rpx;
	}

	.header-input view {
		width: 96rpx;
		height: 66rpx;
	}

	.image {
		margin-left: 20rpx;
		margin-top: 11rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.im {
		width: 100%;
		height: 300rpx;
		// margin-left: 10rpx;
		margin-top: 20rpx;
	}

	.one {
		width: 100%;
		height: 60rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
		align-items: center;

		border-bottom: 1rpx solid #C0C0C0;
	}

	#tx {
		margin-left: 50rpx;
	}

	#count {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.ima {
		margin-top: 10rpx;
		margin-left: 15rpx;
	}

	.xqin {
		width: 100%;
		height: 150rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		align-items: center;

		border-bottom: 1rpx solid #C0C0C0;

	}

	.mz {
		font-size: 35rpx;
		margin-top: 17rpx;
		align-items: center;
		margin-left: 20rpx;

	}

	.zy {
		margin-left: 136rpx;
		font-size: 24rpx;
		margin-top: -39rpx;
		color: #999999;
	}

	.jr {
		margin-left: 660rpx;
		margin-top: -70rpx;
		color: #999999;
	}

	.tr {
		display: flex;
	}
</style>
